<template>
  <div id="div" :class="{'warning':isWarning}" v-show="isShow">
{{title}}
  </div>
</template>
<script>
export default {
  name: 'tip',
  props: {
    title: {
      required: true,
      type: String
    },
    isWarning: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  mounted () {
    const that = this
    document.getElementById('div').addEventListener('animationend', () => {
      that.$emit('update:isShow', false)
    })
  }

}
</script>
<style lang="less" scoped>
@keyframes identifier {
  10%{
    right:50px;
  }
  95%{
    right:50px;
  }
  100%{
    right:-313px;
  }
}
@keyframes borderline {
  10%{
    width:313px;
  }
  95%{
    width:0px;
  }
  100%{
    width:0px;
  }
}
div.warning{
  background-color: red;
}
div{
  position: fixed;
  top:50px;
  right:-313px;
  height:50px;
  width:313px;
  background-color: blue;
  color:white;
  line-height: 50px;
  font-size: 20px;
  animation-name: identifier;
  animation-duration: 3s;
  animation-timing-function:ease;
  &::after{
    content:'';
    position: absolute;
    width:313px;
    height:4px;
    background-color:pink;
    bottom: 0;
    left: 0;
    animation-name: borderline;
    animation-duration: 3s;
    animation-timing-function:ease;
  }
}

</style>
